<template>
  <BasicModal @register="registerModal" :title="getTitle" width="80%">
    <div style="padding: 0 0 20px 20px">
        <span style="background-color: #1890FF;">&nbsp;</span>
        流程审批进度历史
    </div>
    <div>
      <BasicTable @register="registerTable" >
        <!-- <template #action="{ record }"> -->
        <!-- <TableAction :actions="getTableAction(record)" /> -->
      <!-- </template> -->
      </BasicTable>
    </div>
    <div style="padding: 0 0 20px 20px">
        <span style="background-color: #1890FF;">&nbsp;</span>
        实时流程图
    </div>
    <div>
      <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="实时流程图">
        <a-card>
          <!--<p slot="title">
            <span>实时流程图</span>
          </p>-->
          <a-row style="position:relative">
            <img :src="imgUrl" />
            <a-spin size="large" fix v-if="loadingImg"></a-spin>
          </a-row>
        </a-card>
        </a-tab-pane>
        </a-tabs>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { defineProps, ref, computed, unref, reactive } from 'vue';
  import { BasicTable, useTable, TableAction } from '/src/components/Table';
  import { BasicModal, useModalInner } from '/src/components/Modal';
  import { columnsSpDetail,searchHistoricFlowDetail } from '../myApply.data';
  import {historicFlow } from '../myApply.api';
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
   //设置标题
   const getTitle = "流程记录";
   const imgUrl =ref();
   const ids=ref();
   const loadingImg=ref(true);
  //表单配置
  // const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
  //   schemas: formSchemaCancel,
  //   showActionButtonGroup: false,
  //   mergeDynamicData: props,
  //   labelCol: {
  //     xs: { span: 24 },
  //     sm: { span: 4 },
  //   },
  //   wrapperCol: {
  //     xs: { span: 24 },
  //     sm: { span: 18 },
  //   },
  // });
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {

    ids.value= data.record.procInstId;
    searchHistoricFlowDetail[0].defaultValue=ids.value;
    //加载图片
    imgUrl.value=`${window._CONFIG['domianURL']}/activiti/models/getHighlightImg/`+ids.value+"?time=" + new Date();
    loadingImg.value=false;
    //重置表单
    setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
    // isUpdate.value = !!data?.isUpdate;
    // if (unref(isUpdate)) {
    //   //表单赋值
    //   await setFieldsValue({
    //     ...data.record,
    //   });
    // }
  });
  const [registerTable, {reload}] = useTable({
    title: '',
    api: historicFlow,
    columns: columnsSpDetail,
    // actionColumn: {
    //             width: 160,
    //            fixed:'right',
    //            slots: { customRender: 'action' },
    //         },
    formConfig: {
      showSubmitButton:false,// 控制查询按钮显隐
     showResetButton:false,// 控制重置按钮显隐
    // //   labelWidth: 400,
      schemas: searchHistoricFlowDetail,
    //   autoSubmitOnEnter: true,
    baseColProps: { xs: 12, sm: 8,md: 6,lg: 8,xl: 6, xxl: 10,},
    actionColOptions: {  xs: 12, sm: 12,  md: 12,  lg: 12,xl: 8,xxl: 8,},
    },
    size: 'small',
    striped: true,
    useSearchForm: true,
    showTableSetting: false,
    clickToRowSelect: false,
    pagination:false,
    bordered: true,
    showIndexColumn: true,
    tableSetting: { fullScreen: false },
    canResize: false,
    rowKey: 'id',
  });
  function callback(key){
    };

</script>
